<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            text-align: center;
        }
        #name{
            font-size: 30px;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div id="name">张三丰</div>
    <button id="begin">开始点名</button>
    <button id="end">结束点名</button>

    <script>
        window.addEventListener('load',()=>{
            //1、定义变量
            let namer = ["小雪","雪艳","雪梅","弘蝉","文馨","雪舞"];
            let timer = null,randomNum;

            //2、接听点击
            //开始点名
            $('begin').addEventListener('click',()=>{
                //清除
                clearInterval(timer);
                //设置
                timer = setInterval(function(){
                    //取出随机数
                    randomNum = Math.floor(Math.random()*namer.length);

                    //取出名字
                    $('name').innerText = namer[randomNum];
                },10);
            })
            //结束点名
            $('end').addEventListener('click',()=>{
                clearInterval(timer);
            })
        })
        function $(id){
            return typeof id === 'string' ? document.getElementById(id) : null; 
        }
    </script>
</body>
</html>